<script setup lang='ts'>
import {onMounted} from 'vue'
import JsBarcode from 'jsbarcode'

const props=withDefaults(defineProps<{
  init?:boolean
  info?:string
  options?:{[key:string]:any}
}>(),{
  init:false,
  info:'',
  options:()=>({})
})

onMounted(()=>{
  if(props.init) renderBarcode(props.info,props.options)
})

function renderBarcode(info:string,options={}){
  JsBarcode("#barcode", info, options); 
}

defineExpose({
  renderBarcode,
})
/*   options
属性    默认值            类型      说明

format	“auto”(CODE128)	String	条形码的类型
width	 2	 Number	每个条条的宽度，注意这里不是指整个条形码的宽度
height	100	Number	整个条形码的宽度
displayValue	true	Boolean	是否显示条形码下面的文字
fontOptions	“”	String	设置条形码文本的粗体和斜体样式 bold / italic / bold italic
font	“monospace”	String	设置条形码显示文本的字体
textAlign	“center”	String	条形码文本的水平对齐方式，和css中的类似： left / center / right
textPosition	“bottom”	String	条形码文本的位置 bottom / top
textMargin	2	Number	条形码文本 和 条形码之间的间隙大小
fontSize	20	Number	设置条形码文本的字体大小
background	“#ffffff”	String (CSS color)	整个条形码容器的背景颜色
lineColor	“#000000”	String (CSS color)	条形码和文本的颜色
margin	10	Number	整个条形码的外面距
marginTop	undefined	Number	整个条形码的上边距
marginBottom	undefined	Number	整个条形码的下边距
marginLeft	undefined	Number	整个条形码的左边距
marginRight	undefined	Number	整个条形码的右边距
valid	function(valid){}	Function	执行完条形码的一个回调函数，正确true 错误false
*/
</script>

<template>
<div>
  <svg id="barcode" ></svg>
</div>
</template>

<style scoped>

</style>